import React, { useState } from 'react';
import Home from './Home';
import Category from './Category';
import { Link, Route, Switch, Redirect, useHistory, useLocation, useParams } from 'react-router-dom'
// 声明式导航函数组件和类组件写法没啥区别
// 类组件中通过 this.props.history.push(url) 实现编程式导航

const Base = () => {
    const his = useHistory() // 此时. his 就相当于 this.props.history
    const [id, setId] = useState(99)
    return (
        <div>
            {/* 声明式导航 */}
            {/* <Link to='/home'><button>首页</button></Link>
            <Link to='/category'><button>分类</button></Link> */}

            {/* 编程式导航 */}
            <p>
                <button onClick={() => {
                    his.push('/home?id=100&age=123')
                }}>首页</button>
                {/* <button onClick={() => {
                    his.push({
                        pathname: '/category',
                        state: { name: "伟大的江泽民永垂不朽", age: 20 }
                    })
                }}>分类</button> */}
                <button onClick={() => {
                    his.push('/category/' + id)
                }}>分类</button>
                <button onClick={() => {
                    his.push('/home/home1')
                }}>home页的子页面home1</button>
            </p>

            {/* 路由组匹配后的组件存放的位置, 坑 */}
            <Switch>
                <Route path='/home' component={Home}></Route>
                <Route path='/category/:id' component={Category}></Route>
                <Redirect from='/' to='/home' exact></Redirect>
            </Switch>
        </div>
    );
}

export default Base;
